<template>
  <div>
    <el-container>
      <!--头部搜索-->
     <el-header>
       <div class="demo-block">
        <el-form :inline="true" :model="commentVo" class="demo-form-inline" style="margin-top:10px">
          <el-form-item label="商品名称:">
            <el-input
              v-model="commentVo.skuName"
              placeholder="请输入商品名称"
            ></el-input>
          </el-form-item>
          <el-form-item label="商品分类:">
            <el-input
              v-model="commentVo.categoryId"
              placeholder="请输入商品分类"
            ></el-input>
          </el-form-item>
          <el-form-item label="用户名称:">
            <el-input
              v-model="commentVo.nickName"
              placeholder="请输入用户名称"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">查询</el-button>
          </el-form-item>
        </el-form>
       </div>
     </el-header>
     
     <!--内容主题-->
     <el-main class="source">
       <el-table
          ref="multipleTable"
          :data="tableData"
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange">
          <el-table-column
            type="selection"
            width="55">
          </el-table-column>
          <el-table-column
            label="编号"
            width="120" prop="skuId">
          </el-table-column>
          <el-table-column
            prop="name"
            label="用户名称"
            width="120">
          </el-table-column>
          <el-table-column
            label="商品名称"
            width="240">
            <template slot-scope="scope">
               <span v-for="(row,index) in scope.row.skuName.split(' ')" :key="index">
                <p v-if="index == 0">
                  {{row}}
                </p>
               </span>
            </template>
          </el-table-column>
          <el-table-column
            label="评价"
            width="180">
            <template slot-scope="scope">
              <el-rate
                v-model="scope.row.evaluate"
                disabled>
              </el-rate>
            </template>
          </el-table-column>
          <el-table-column
            prop="ipAddress"
            label="IP地址"
            width="120">
          </el-table-column>
          <el-table-column
            prop="commentTime"
            label="评论时间"
            width="150">
          </el-table-column>
          <el-table-column
            label="是否显示"
            width="90">
             <template slot-scope="scope">
               <el-switch
                v-model="scope.row.display"
                active-color="#13ce66"
                inactive-color="#ff4949"
                active-value="1"
                inactive-value="0">
              </el-switch>
             </template>
          </el-table-column>
          <el-table-column
            label="操作"
            show-overflow-tooltip>
            <template >
              <a href="#" style="margin-right:40px">查看</a>   
              <a href="#">删除</a>
            </template>
          </el-table-column>
       </el-table>
       <div>
         <el-button @click="queryAll([tableData])">全选</el-button>
         <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageNum"
            :page-sizes="[10, 20, 30, 50]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            style="float:right">
          </el-pagination>
       </div>
     </el-main>
    </el-container>
  </div>
</template>

<script>
export default {
  data () {
    return {
      commentVo: {},//查询对象
      tableData: [],//查询数据
      multipleSelection: [],//选中的值
      total: 0,//总数
      pageNum: 1,//页号
      pageSize: 10//页大小
    }
  },
  methods: {
     async getSpuList(){
        const {data:res} = await this.$http.post(`vi/goods/comment/pageComment/${this.pageNum}/${this.pageSize}`,this.commentVo);
        this.tableData = res.data.pageUtils.rows
        console.log(res)
        this.total = res.data.pageUtils.total
     },
     handleSelectionChange(val) {
        this.multipleSelection = val;
    },//查询
    onSubmit(){
      this.getSpuList();
    },//全选操作
    queryAll(row){
      console.log(row)
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    }
  },
  created(){
     this.getSpuList()
  }
}
</script>

<style scoped>
.demo-block {
  margin-bottom: 24px;
}

.source {
  margin-bottom: 24px;
}

div {
    display: block;
}

.demo-block {
    border: 1px solid #ebebeb;
    border-radius: 3px;
    transition: .2s;
}

.meta {
  border-top: 1px solid #eaeefb;
  overflow: hidden;
  height: 210px;
  transition: height 0.2s;
}

.demo-block-control {
  border-top: 1px solid #eaeefb;
  height: 44px;
  box-sizing: border-box;
  background-color: #fff;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  text-align: center;
  margin-top: -1px;
  color: #d3dce6;
  cursor: pointer;
  position: relative;
  left: 0px;
}
</style>
